<!DOCTYPE html>
<html>

<head><meta name="generator" content="Hexo 3.8.0">
  
  <title>vue传值使用方法 - 绪锋</title>
  <meta charset="UTF-8">
  <meta name="description" content="小镇青年,心怀远方">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  

    <!-- Site Verification -->
    <meta name="baidu-site-verification" content="cXpXJOvmtY">

  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  <meta name="description" content="Vue 组件间通信只要指以下 3 类通信：  父子组件通信  隔代组件通信  兄弟组件通信">
<meta name="keywords" content="vue">
<meta property="og:type" content="article">
<meta property="og:title" content="vue传值使用方法">
<meta property="og:url" content="https://mraing.github.io/2019/12/19/vue传值使用方法/index.html">
<meta property="og:site_name" content="绪锋">
<meta property="og:description" content="Vue 组件间通信只要指以下 3 类通信：  父子组件通信  隔代组件通信  兄弟组件通信">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-12-20T06:27:38.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue传值使用方法">
<meta name="twitter:description" content="Vue 组件间通信只要指以下 3 类通信：  父子组件通信  隔代组件通信  兄弟组件通信">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.15.8/styles/atom-one-dark.css">
   
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1038733_0xvrvpg9c0r.css">
  <link rel="stylesheet" href="/css/style.css?v=1627371788847">
</head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://i.loli.net/2019/01/13/5c3aec85a4343.jpg)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="LeeGeing" class="mdui-btn mdui-btn-icon"><img src="/images/avatar.jpg"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="LeeGeing">
            <img src="/images/avatar.jpg" alt="LeeGeing">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>文章</span>82</div>
        <div><span>标签</span>28</div>
        <div><span>分类</span>8</div>
    </div>
    <ul class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-home"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于博客">
            <i class="mdui-list-item-icon nexmoefont icon-info-circle"></i>
            <div class="mdui-list-item-content">
                关于博客
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/PY.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-unorderedlist"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
    </ul>
    <aside id="nexmoe-sidebar">
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">社交按钮</h3>
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="https://space.bilibili.com/11147795" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/mraing/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/React/">React</a>
          <span class="category-list-count">7</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/TypeScript/">TypeScript</a>
          <span class="category-list-count">5</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/Vue/">Vue</a>
          <span class="category-list-count">33</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/前端/">前端</a>
          <span class="category-list-count">19</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/博客/">博客</a>
          <span class="category-list-count">3</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/工具/">工具</a>
          <span class="category-list-count">6</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/碎碎念/">碎碎念</a>
          <span class="category-list-count">4</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/软件设计师/">软件设计师</a>
          <span class="category-list-count">5</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">标签云</h3>
    <div id="randomtagcloud" class="nexmoe-widget tagcloud">
      <a href="/tags/Hbuilder/" style="font-size: 10px;">Hbuilder</a> <a href="/tags/Homebrew/" style="font-size: 10px;">Homebrew</a> <a href="/tags/JS/" style="font-size: 14px;">JS</a> <a href="/tags/JSX/" style="font-size: 10px;">JSX</a> <a href="/tags/Mint-UI/" style="font-size: 10px;">Mint-UI</a> <a href="/tags/Nginx/" style="font-size: 10px;">Nginx</a> <a href="/tags/Ngnix/" style="font-size: 10px;">Ngnix</a> <a href="/tags/OpenInTerminal/" style="font-size: 10px;">OpenInTerminal</a> <a href="/tags/Sass/" style="font-size: 14px;">Sass</a> <a href="/tags/Vuex/" style="font-size: 10px;">Vuex</a> <a href="/tags/antd/" style="font-size: 10px;">antd</a> <a href="/tags/css/" style="font-size: 10px;">css</a> <a href="/tags/docsify/" style="font-size: 10px;">docsify</a> <a href="/tags/git/" style="font-size: 12px;">git</a> <a href="/tags/hexo/" style="font-size: 12px;">hexo</a> <a href="/tags/mui/" style="font-size: 18px;">mui</a> <a href="/tags/react/" style="font-size: 14px;">react</a> <a href="/tags/redux/" style="font-size: 10px;">redux</a> <a href="/tags/swiper/" style="font-size: 10px;">swiper</a> <a href="/tags/typescript/" style="font-size: 16px;">typescript</a> <a href="/tags/vue/" style="font-size: 20px;">vue</a> <a href="/tags/vux/" style="font-size: 10px;">vux</a> <a href="/tags/她/" style="font-size: 10px;">她</a> <a href="/tags/感悟/" style="font-size: 12px;">感悟</a> <a href="/tags/日记/" style="font-size: 10px;">日记</a> <a href="/tags/消息推送/" style="font-size: 10px;">消息推送</a> <a href="/tags/知识点/" style="font-size: 10px;">知识点</a> <a href="/tags/软考笔记/" style="font-size: 16px;">软考笔记</a>
    </div>
    
  </div>

  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/">十月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">六月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/01/">一月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">十二月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">九月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">八月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">五月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a></li></ul>
    </div>
  </div>


  
</aside>
    <!-- <div class="nexmoe-copyright">
        &copy; 2021 LeeGeing
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://nexmoe.com/hexo-theme-nexmoe.html" target="_blank">Nexmoe</a>
    </div> -->
    <div class="nexmoe-copyright">
        <a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action" target="_blank">湘ICP备16019481号</a>
        <!-- & <a href="https://nexmoe.com/hexo-theme-nexmoe.html" target="_blank">Nexmoe</a> -->
    </div>
</div><!-- .nexmoe-drawer -->
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
    <div class="nexmoe-post-cover"> 
        
            <img src="https://i.loli.net/2019/01/13/5c3aec85a4343.jpg">
        
        <h1>vue传值使用方法</h1>
    </div>
  <div class="nexmoe-post-meta">
    <a><i class="nexmoefont icon-calendar-fill"></i>2019年12月19日</a>
    <a><i class="nexmoefont icon-areachart"></i>1k 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 4 分钟</a>
    
      <a class="nexmoefont icon-appstore-fill -link" href="/categories/Vue/">Vue</a>
    
    
      <a class="nexmoefont icon-tag-fill -link" href="/tags/vue/">vue</a>
    
  </div>
  <article>
    <p>Vue 组件间通信只要指以下 3 类通信：</p>
<ul>
<li><p>父子组件通信</p>
</li>
<li><p>隔代组件通信</p>
</li>
<li><p>兄弟组件通信</p>
</li>
</ul>
<a id="more"></a>
<h3 id="prop-emit"><a href="#prop-emit" class="headerlink" title="prop / $emit"></a><code>prop</code> / <code>$emit</code></h3><blockquote>
<p><code>prop</code> / <code>$emit</code> 适用 父子组件通信,这也是我们最常见用得最多的方法。</p>
</blockquote>
<p><code>prop</code>: 父组件通过在子组件上绑定参数，子组件通过 props 接收参数。</p>
<pre><code class="JavaScript">&lt;!--父组件--&gt;
:showMsg=&#39;参数&#39;

&lt;!--子组件--&gt;
props: [&#39;showMsg&#39;]
</code></pre>
<p><code>$emit</code>: 子组件通过 <code>$emit</code> 派发自定义事件，由父组件监听事件，也可以进行参数的传递。</p>
<pre><code class="JavaScript">&lt;!--子组件--&gt;
this.$emit(&#39;自定义事件名字&#39;，&#39;参数&#39;)

&lt;!--父组件--&gt;
@自定义事件名字 = &#39;事件名称&#39;

事件名称 (val) {
    return val
}
</code></pre>
<p>举个栗子：</p>
<p>我们在父组件上做两件事：</p>
<ul>
<li>在子组件上绑定值 <code>:fprops=&quot;msg&quot;</code></li>
<li>在子组件上接收自定义事件  <code>@showMsg=&quot;updateMsg&quot;</code></li>
</ul>
<pre><code class="JavaScript">&lt;!--父组件 parent.vue--&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;h2&gt;Prop / $emit 传值&lt;/h2&gt;
    &lt;h4&gt;我是父组件&lt;/h4&gt;
    &lt;div&gt;接收子组件的参数: {{smsg}}&lt;/div&gt;
    &lt;Child :fprops=&quot;msg&quot; @showMsg=&quot;updateMsg&quot;/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Child from &#39;./Child&#39;
export default {
  data () {
    return {
      // 定义 msg
      msg: &#39;Hello Child&#39;,
      smsg: &#39;&#39;
    }
  },
  components: {
    Child
  },
  methods: {
    updateMsg (val) {
      this.smsg = val
    }
  }
}
&lt;/script&gt;
</code></pre>
<p>然后我们在子组件上，也做两件事：</p>
<ul>
<li>通过 prop 接收父组件的传参 <code>props: [&#39;参数名&#39;]</code></li>
<li>通过 <code>$emit</code> 派发自定义事件 <code>this.$emit(&#39;showMsg&#39;, &#39;Hello Parten&#39;)</code></li>
</ul>
<pre><code class="JavaScript">&lt;!--子组件--&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;h4&gt;我是子组件&lt;/h4&gt;
    &lt;div&gt;接收父组件参数: {{fvalue}}&lt;/div&gt;
    &lt;div @click=&quot;select&quot;&gt;&lt;button&gt;给父组件传值&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: {
    fprops: {
      type: String
    }
  },
  data () {
    return {
      fvalue: this.fprops,
      msg: &#39;Hello Parent&#39;
    }
  },
  methods: {
    select () {
      this.$emit(&#39;showMsg&#39;, &#39;Hello Parten&#39;)
    }
  }
}
&lt;/script&gt;
</code></pre>
<h3 id="refs-children-parent"><a href="#refs-children-parent" class="headerlink" title="$refs / $children / $parent"></a><code>$refs</code> / <code>$children</code> / <code>$parent</code></h3><p><code>ref</code> 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果用在子组件上，引用就指向组件实例。</p>
<p>例如将 ref 标记在子组件上：</p>
<pre><code class="JavaScript">&lt;Child ref=&quot;myChild&quot; /&gt;
</code></pre>
<p>然后父组件中就可以用过 <code>this.$refs.myChild</code> 访问这个子组件了，包括访问子组件的中<code>data</code> 里面的数据，或者调用它的函数。</p>
<hr>
<p><code>$children</code> 返回的是当前父组件下的所有子组件的集合，那到子组件的下标后，也是可以访问到子组件中的数据。</p>
<pre><code class="JavaScript">this.$children[子组件下标]
</code></pre>
<hr>
<p><code>$parent</code> 用在子组件身上，可以调用父组件中的数据和方法。</p>
<pre><code class="JavaScript">this.$parent
</code></pre>
<h3 id="EventBus-emit-on"><a href="#EventBus-emit-on" class="headerlink" title="EventBus ($emit / $on)"></a>EventBus <code>($emit / $on)</code></h3><p>EventBus 它的工作原理是发布/订阅方法 <code>$emit 发布</code>, <code>$on 订阅</code>.</p>
<p>EventBus 又称为事件总线.</p>
<h4 id="初始化-EventBus"><a href="#初始化-EventBus" class="headerlink" title="初始化 EventBus"></a>初始化 EventBus</h4><p> 这里有两种方式，可以单独局部使用，需要的时候就引入，不需要的时候就不引用，或者直接定义成全局的。</p>
<ul>
<li>局部</li>
</ul>
<pre><code class="JavaScript">// 初始化 event-bus.js
import Vue from &#39;vue&#39;
export const EventBus = new Vue()
</code></pre>
<ul>
<li>全局</li>
</ul>
<pre><code class="JavaScript">// main.js
var EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})
</code></pre>
<h4 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</h4><p>通过 <code>EventBus.$emit(&#39;EventBusName&#39;, &#39;参数&#39;)</code> 发布事件</p>
<ul>
<li>局部</li>
</ul>
<pre><code class="JavaScript">// 引用EventBus
import { EventBus } from &#39;../../common/event-bus.js&#39;

// 通过
EventBus.$emit(&#39;EventBusName&#39;, &#39;data&#39;)
</code></pre>
<ul>
<li>全局</li>
</ul>
<pre><code class="JavaScript">this.$bus.$emit(&#39;EventBusName&#39;, &#39;data&#39;)
</code></pre>
<h4 id="订阅"><a href="#订阅" class="headerlink" title="订阅"></a>订阅</h4><p>通过 <code>EventBus.$on</code> 订阅事件</p>
<ul>
<li>局部</li>
</ul>
<pre><code class="JavaScript">EventBus.$on(&#39;EventBusName&#39;, (params) =&gt; {
    //获取传递的参数并进行操作
})
</code></pre>
<ul>
<li>全局</li>
</ul>
<pre><code class="JavaScript">this.$bus.$on(&#39;EventBusName&#39;, (params) =&gt; {
    //获取传递的参数并进行操作
})
</code></pre>
<h4 id="移除-EventBus"><a href="#移除-EventBus" class="headerlink" title="移除 EventBus"></a>移除 EventBus</h4><p>vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。</p>
<p>还要就是如果业务有反复操作的页面，EventBus 在监听的时候就会触发很多次,这也是不利于项目的优化。</p>
<p>通常会用到 <code>EventBus.$off()</code>，在vue页面 <code>beforeDestory</code> 阶段销毁前，移除EventBus 事件监听。</p>
<ul>
<li>局部</li>
</ul>
<pre><code class="JavaScript">&lt;!--移除单个 EventBus--&gt;
EventBus.$off(&#39;EventBusName&#39;)

&lt;!--移除全部 EventBus--&gt;
EventBus.$off()
</code></pre>
<ul>
<li>全局</li>
</ul>
<pre><code class="JavaScript">&lt;!--移除单个 EventBus--&gt;
this.$bus.$off(&#39;EventBusName&#39;)

&lt;!--移除全部 EventBus--&gt;
this.$bus.$off()
</code></pre>
<p>### </p>

  </article>
  
    

  
  <section class="nexmoe-comment">
    <script id="dsq-count-scr" src="https://leegeing-cn.disqus.com/count.js" async></script>
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = 'https://mraing.github.io/2019/12/19/vue传值使用方法/'; // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://mraing.github.io/2019/12/19/vue传值使用方法/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>
<script id="disqus-thread-script">
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document;
        var s = d.createElement('script');
        s.src = '//leegeing-cn.disqus.com/embed.js';
        s.setAttribute('data-timestamp', + new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

</section>
</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/js/mdui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
 
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


 
    <script src="https://cdn.jsdelivr.net/npm/smoothscroll-for-websites@1.4.9/SmoothScroll.min.js"></script>


<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<script src="/js/app.js?v=1627371788855"></script>
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.1.0/lazysizes.min.js"></script>


    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/xtaodada/xtaodada.github.io@0.0.2/copy.js"></script>

  





</body>

</html>
